<template>
  <div class="prodetail-index">
    <!-- 商品详情页heard-nav -->
     <div>
        <van-nav-bar
        title="商品详情"
        left-arrow
        @click-left="onClickLeft"
      />
     </div>
     <!-- 商品详情页轮播图 -->
     <div class="banner-wrap">
      <van-swipe @change="onChange">
        <van-swipe-item v-for="(item, index) in imgList" :key="index">
          <img :src="item.preview_url" alt="">
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/{{imgList.length}}</div>
        </template>
      </van-swipe>
     </div>
     <!-- 商品详情页商品信息 -->
      <div class="goods-info m-t_5">
        <!-- 价格、销量 -->
        <div class="d-flex justify-content-between p-l_10 p-r_10 py-1">
          <div class=""><span class="fontSize-18 text-danger me-1">￥{{proDetail.goods_price_min}}</span><del class="text-black-50 fontSize-14">￥{{proDetail.goods_price_max}}</del></div>
          <div class=""><span class="text-secondary fontSize-14">销量{{proDetail.goods_sales > 10000 ? '9999+' : proDetail.goods_sales}}件</span></div>
        </div>
        <!-- 商品名称 -->
        <div class="p-l_10 p-r_10">
          <p class="text-ellipsis mb-0 text-monospace fontSize-18">{{proDetail.goods_name}}</p>
        </div>
      </div>
      <!-- 商品详情页商品规格 -->
      <div class="prodtail_specification">
        <div>
          <van-cell>
             <template #title>
              <span class="custom-title">所选规格</span>
              <span class="m-l_10 fontSize-14 text-secondary">【热销精选】{{proDetail.goods_no}}</span>
            </template>
            <template #right-icon>
              <div>
                 <van-icon name="weapp-nav" />
              </div>
            </template>
          </van-cell>
        </div>
      </div>
      <!-- 商品详情页商品服务 -->
      <div class="prodetail_serve">
        <div class="prodetail_serve_container">
          <van-cell is-link>
            <template #title>
              <span class="custom-title me-2 text-dark" v-for="item in guaranteeList" :key="item.service_id">
                <van-icon name="certificate" class="me-1" color="#ee0a24"/>
                {{item.name}}
              </span>
            </template>
          </van-cell>
        </div>
      </div>
      <!-- 商品详情页商品评论 -->
      <div class="prodetail_extra d-flex flex-column">
        <!-- 商品详情页商品评论头部 -->
        <div class="prodetail_extre_header m-b_5">
          <van-cell is-link value="查看更多">
            <template #title>
              <span class="custom-title text-body">商品评价（{{total}}条）</span>
            </template>
          </van-cell>
        </div>
        <!-- 商品详情页商品评论内容 -->
        <div class="prodetail_extre_content p-y_10" v-for="item in commentsList" :key="item.comment_id">
          <div class="d-flex justify-content-start align-items-center mb-2">
            <img :src="item.user.avatar_url || defaultImg" alt="" class="m-r_10">
            <p class="mb-0 fontSize-14 me-1">{{item.user.nick_name}}</p>
            <div class="p_e_icon">
              <van-rate :value="item.score / 2" allow-half readonly void-icon="star" void-color="#eee" :size="14" />
            </div>
          </div>
          <p class="mb-0 text-truncate">{{ item.content }}</p>
          <time class="text-secondary fontSize-14">{{item.create_time}}</time>
        </div>
      </div>
      <!-- 商品详情页商品详情 -->
      <div class="prodetail_desc">
        <div class="prodetail_desc_title">商品介绍</div>
        <div class="prodetail_desc_wrapper">
          <div class="prodetail_desc_content" v-html="proDetail.content"></div>
        </div>
      </div>
      <!-- 商品导航 -->
      <div class="van_goods_action">
       <van-goods-action>
          <van-goods-action-icon icon="chat-o" text="客服" />
          <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartTotal || ''" to="/cart"/>
          <van-goods-action-button type="warning" text="加入购物车" @click="addFn"/>
          <van-goods-action-button type="danger" text="立即购买" @click="buyNowFn"/>
        </van-goods-action>
      </div>
      <!-- 加入购物车/立即购买弹窗 -->
       <van-action-sheet v-model="show" :title="modeTitle === 'cart' ? '加入购物车' : '立即购买'">
        <div class="cart-content p-x_5-y_10">
          <div class="d-flex justify-content-start align-items-center cart-content-header">
            <img :src="proDetail.goods_image" alt="">
            <div class="m-l_10">
              <p class="mb-0 text-danger">￥<span class="fs-5">{{proDetail.goods_price_min}}</span></p>
              <p class="mb-0 fontSize-14">库存：{{proDetail.stock_total > 10000 ? '9999+' : proDetail.stock_total}}件</p>
            </div>
          </div>
          <div class="cart-content-body d-flex justify-content-between align-items-center my-3">
            <div>数字</div>
            <div><CountBox v-model="addValue"></CountBox></div>
          </div>
          <div class="cart-content-footer m-b_5">
            <div v-if="proDetail.stock_total > 0">
              <button type="button" class="btn btn-primary btn-lg btn-block add-btn-color" v-if="modeTitle === 'cart'" @click="addCartFn">加入购物车</button>
              <button type="button" class="btn btn-primary btn-lg btn-block buy-btn-color" v-else @click="goBuyNow">立即购买</button>
            </div>
            <div v-else>
              <button type="button" class="btn btn-secondary btn-lg btn-block" disabled>该商品以抢完</button>
            </div>
          </div>
        </div>
      </van-action-sheet>
  </div>
</template>

<script>
import { getProductDetail, getProductComment, getProductGuarantee } from '@/api/product'
import { addCart } from '@/api/addCart'
import defaultImg from '@/assets/imgs/visitor.png'
import CountBox from '@/components/CountBox.vue'
import loginConfirm from '@/mixins/loginConfirm'
export default {
  name: 'ProDetailIndex',
  mixins: [loginConfirm],
  components: {
    CountBox
  },
  data () {
    return {
      current: 0, // 轮播图当前索引
      value: 4.5, // 商品评分
      proDetail: {}, // 商品详情
      imgList: [], // 轮播图列表
      total: 0, // 总评论数
      guaranteeList: [], // 保障列表
      commentsList: [], // 评论列表
      liemt: 3, // 每页评论条数
      defaultImg, // 默认图片
      show: false, // 加入购物车弹窗状态
      modeTitle: 'cart', // 加入购物车弹窗标题
      addValue: 1, // 加入购物车商品数量
      cartTotal: 0 // 购物车总数
    }
  },
  computed: {
    goodsId () {
      return this.$route.params.id
    }
  },
  created () {
    this.getProDetail()
    this.getProComment()
    this.getProductGuarantee()
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    onChange (index) {
      this.current = index
    },
    async getProDetail () {
      const { data: { detail } } = await getProductDetail(this.goodsId)
      this.proDetail = detail
      this.imgList = this.proDetail.goods_images
      // console.log(this.proDetail)
    },
    async getProComment () {
      const { data: { list, total } } = await getProductComment(this.goodsId, this.liemt)
      this.total = total
      this.commentsList = list
    },
    async getProductGuarantee () {
      const { data: { list } } = await getProductGuarantee(this.goodsId)
      this.guaranteeList = list
      console.log(this.guaranteeList)
    },
    addFn () {
      this.modeTitle = 'cart'
      this.show = true
    },
    buyNowFn () {
      this.modeTitle = 'buyNow'
      this.show = true
    },
    async addCartFn () {
      if (this.loginConfirm()) {
        return
      }
      const { data } = await addCart(this.goodsId, this.addValue, this.proDetail.skuList[0].goods_sku_id)
      this.cartTotal = data.cartTotal

      this.show = false
      this.$toast.success('加入购物车成功')
    },
    goBuyNow () {
      if (this.loginConfirm()) {
        return
      }
      this.$router.push({
        path: '/pay',
        query: {
          mode: 'buyNow',
          goodsId: this.goodsId,
          goodsNum: this.addValue,
          goodsSkuId: this.proDetail.skuList[0].goods_sku_id
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  .prodetail-index {
    // 商品详情页banner-swipper样式修改
    .banner-wrap{
      ::v-deep {
        .van-swipe-item{
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
      .custom-indicator {
        position: absolute;
        right: 0px;
        bottom: 8px;
        padding: 2px 4px 2px 8px;
        font-size: 12px;
        color: #696969;
        border-radius: 25px 0 0 25px;
        background: rgba(0, 0, 0, 0.1);
      }
    }
    // 商品详情页商品规格样式修改
    .prodtail_specification{
      ::v-deep{
        .van-cell{
          padding: 6px 10px;
          .van-cell__title {
            .custom-title{
              font-weight: bold;
            }
          }
        }
      }
    }
    // 商品详情页商品服务样式修改
    .prodetail_serve{
      .prodetail_serve_container{
        ::v-deep{
          .van-cell{
            padding: 5px 10px;
            // 去除点击高亮效果
            &:focus,
            &:active{
              background-color: transparent !important;
            }
            // 新增波纹效果清除
            &::after {
              display: none !important;
            }
          }
        }
      }
    }
    // 商品详情页商品评论样式修改
    .prodetail_extra{
      padding: 4px 10px;
      // 商品详情页商品评论头部样式修改
      .prodetail_extre_header{
        ::v-deep{
          .van-cell{
            padding: 0px;
            .custom-title{
              font-weight: 500;
            }
            // 去除点击高亮效果
            &:focus,
            &:active{
              background-color: transparent !important;
            }
            // 新增波纹效果清除
            &::after {
              display: none !important;
            }
          }
        }
      }
      // 商品详情页商品评论内容样式修改
      .prodetail_extre_content{
        border-bottom: 2px solid #f7f8fa;
        img{
          width: 25px;
          height: 100%;
          border-radius: 50%;
          object-fit: contain;
        }
        .p_e_icon{
          position: relative;
          bottom: 1.5px;
        }
      }
    }
    // 商品详情页商品详情样式修改
    .prodetail_desc{
      max-width: 375px;
      margin: 0 auto;
      overflow: hidden;
      .prodetail_desc_title{
        font-size: 18px;
        font-weight: bold;
        margin: 10px 0;
        text-align: center;
      }
      //增强样式隔离，防止v-html影响其他样式
      .prodetail_desc_wrapper{
        overflow: auto;
        width: 100%;
        max-height: 100vh;
        .prodetail_desc_content {
          ::v-deep{
            *{
              max-width: 100% !important; /* 强制所有元素宽度不超过容器 */
              box-sizing: border-box !important; /* 包含内边距和边框 */
            }
            /* 特别处理图片 */
            img {
              max-width: 100% !important;
              height: auto !important;
              display: block; /* 防止图片下方间隙 */
            }
            /* 处理表格等特殊元素 */
            table {
              width: 100% !important;
              table-layout: fixed; /* 防止表格撑开 */
            }
            /* 重置可能影响布局的样式 */
            div,
            p,
            section {
              margin: 8px 0 !important;
              padding: 0 12px !important;
            }
          }
        }
      }
    }
    // 商品导航样式修改
    .van_goods_action{
      ::v-deep{
        .van-goods-action{
          .van-goods-action-icon{
            // 去除点击高亮效果
            &:focus,
            &:active{
              background-color: transparent !important;
            }
            // 新增波纹效果清除
            &::after {
              display: none !important;
            }
            // 添加点击变色效果
            &:active{
              color: #ee0a24;
              .van-icon{
                color: #ee0a24;
              }
            }
          }
        }
      }
    }
    // 加入购物车弹窗样式修改
    ::v-deep(.van-popup){
      .cart-content{
        .cart-content-header{
          img{
            width: 100px;
            height: 100%;
            object-fit: contain;
          }
        }
        .cart-content-footer{
          .btn{
             width: 100%;
             height: 40px;
             font-size: 16px;
             border-radius: 25px;
             border:none;
          }
        }
      }
    }
  }
</style>
